<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jquery+ajax实现登录</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#loginBtn").click(function () {
                var username = $("#username").val();//取值
                var password = $("#password").val();
                if (!username) {
                    alert("用户名必填!");
                    $("#username").focus();//获取焦点
                    return;
                }
                if (!password) {
                    alert("密码必填!");
                    $("#password").focus();//获取焦点
                    return;
                }

                $.ajax({
                    url: "data.txt", //数据库地址
                    type: "get",
                    data: {
                        "username": username,
                        "password": password
                    },
                    // beforeSend: function (xhr) {
                    //     console.log("before send");
                    // },
                    success: function (data) {
                        if (data == true)
                            alert("登录成功！");
                        else
                            alert("Error!");
                    },
                    error: function () {
                        console.log("请求error");
                    }
                    // complete: function (xhr) {
                    //     console.log("complete");
                    //     console.log(xhr);
                    // }
                })
            });
        })


    </script>
</head>

<body>
    <form>
        用户名:<input type="text" id="username" name="username"><br />
        密码:<input type="text" id="password" name="password"><br />
        <input type="button" value="登录" id="loginBtn">
        <input type="button" value="注册" id="signupBtn"><br>
    </form>
</body>

</html>